<template>
    <div class="card card-custom card-stretch gutter-b">
      <!--begin::Header-->
      <div class="card-header border-0">
        <h3 class="card-title font-weight-bolder text-dark">平台公告</h3>
        <div class="card-toolbar">
        </div>
      </div>
      <!--end::Header-->
      <!--begin::Body-->
      <div class="card-body pt-0">
        <template v-for="(item, i) in list">
          <div class="mb-6" v-bind:key="i">
            <!--begin::Content-->
            <div class="d-flex align-items-center flex-grow-1">
              <!--begin::Checkbox-->
              <!-- <label
                class="checkbox checkbox-lg checkbox-lg checkbox-single flex-shrink-0 mr-4"
              >
                <input type="checkbox" value="1" />
                <span></span>
              </label> -->
              <!--end::Checkbox-->
              <!--begin::Section-->
              <div
                class="d-flex flex-wrap align-items-center justify-content-between w-100"
              >
                <!--begin::Info-->
                <div class="d-flex flex-column align-items-cente py-2 w-75">
                  <!--begin::Title-->
                  <a
                    href="#"
                    class="text-dark-75 font-weight-bold text-hover-primary font-size-lg mb-1"
                    >{{ item.title }}</a
                  >
                  <!--end::Title-->
                  <!--begin::Data-->
                  <span class="text-muted font-weight-bold">{{ item.createBy }}【{{ item.createTime }}】</span>
                  <!--end::Data-->
                </div>
                <!--end::Info-->
                <!--begin::Label-->
                <span
                  class="label label-lg label-inline font-weight-bold py-4"
                  v-bind:class="`label-light-${item.class}`"
                  >{{ item.statusText }}</span
                >
                <!--end::Label-->
              </div>
              <!--end::Section-->
            </div>
            <!--end::Content-->
          </div>
        </template>
        <!--begin::Item-->
        <!--end::Item-->
      </div>
      <!--end: Card Body-->
    </div>
  </template>
  
<script>
import { mapGetters } from "vuex";
import apiUtil from "@/core/util/apiUtil.js";  
export default {
  name: "widget-5",
  data() {
    return {
      searchForm: { },
      list: [],
      sels: [], //当前选框选中的值
      pageNo: 1,      // 默认当前是第一页
      pageSize: 5,    // 当前每页的数据是5条
      totalCount: 0   // 总数默认为0
    };
  },
  mounted() {
      this.initList();  
  },
  methods: {
    initList() {
          var params = {};
          params.usePageNo = true;//采用第几页进行分页（兼容）
          params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
          params.pageNo = this.pageNo;//开始的记录序号   
          params.searchJson = JSON.stringify(this.searchForm);//为form元素     
          apiUtil.queryPage(process.env.VUE_APP_SYS_API + "/sysNotice/list", params).then(({ data }) => {
              this.list = data.data;//给结果集赋值
              for(let i in this.list){
                  if(this.list[i].state == 0){
                    this.list[i].class = "danger"
                    this.list[i].statusText = "草稿"
                  }else  if(this.list[i].state == 1){
                    this.list[i].class = "info"
                    this.list[i].statusText = "审核中"
                  }else{
                    this.list[i].class = "success"
                    this.list[i].statusText = "已发布"
                  }
              }
              this.totalCount = data.total;// 获取当前数据的总数    
          });
      }
  },
  components: {
    
  }
};
</script>
